<template>
  <div :class="props.visible ? 'tabList-ac tabList' : 'tabList'">
    <div>
      <div class="tabList-year" v-for="it in data">
        <div class="tabList-year-title">{{ it.period }}年度</div>
        <div class="tabList-year-layout">
          <div
            v-for="item in it.data"
            :class="
              props.modelValue === item.sorgSpotCheckPlanId
                ? 'tabList-year-layout-ac'
                : ''
            "
            @click="setModelValue(item.sorgSpotCheckPlanId)"
          >
            {{ item.planName }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
const props = defineProps(['visible', 'modelValue', 'planList'])
const emit = defineEmits(['reload', 'update:modelValue', 'update:visible'])
const data = ref([])
watch(
  () => props.planList,
  (val) => {
    if (val) {
      data.value = groupByFourYearPeriod(val)
      console.log('groupByFourYearPeriod(val)', groupByFourYearPeriod(val))
    }
  }
)

// 按照每四年一个维度分组的函数
const groupByFourYearPeriod = (data) => {
  // 初始化二维数组
  const groupedData = []

  // 获取数据中的最小年份和最大年份
  const minYear = Math.min(...data.map((item) => parseInt(item.year)))
  const maxYear = Math.max(...data.map((item) => parseInt(item.year)))

  // 循环构建每个四年期的数据和维度信息
  for (let startYear = minYear; startYear <= maxYear; startYear += 4) {
    const endYear = startYear + 3
    const periodData = data.filter((item) => {
      const year = parseInt(item.year)
      return year >= startYear && year <= endYear
    })

    if (periodData.length > 0) {
      groupedData.push({
        period: `${startYear}-${endYear}`,
        data: periodData
      })
    }
  }

  return groupedData
}

const setModelValue = (id) => {
  emit('update:modelValue', id)
  emit('update:visible', false)
  emit('reload')
}
</script>

<style scoped lang="scss">
.tabList {
  width: calc(100% - 60px);
  position: absolute;
  top: 70px;
  left: 30px;
  z-index: 99;
  max-height: 0;
  background: #ffffff;
  box-shadow: 0px 0px 16px 1px rgba(28, 133, 255, 0.16);
  border-radius: 8px 8px 8px 8px;
  border: 1px solid #e9e9e9;
  transition: all 0.05s linear;

  visibility: hidden;

  & > div {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 30px;
    overflow-y: scroll;
  }
  .tabList-year {
    width: 100%;
    display: flex;
    margin-bottom: 20px;
    .tabList-year-title {
      width: 150px;
      font-weight: 500;
      font-size: 18px;
      color: #333333;
    }
    .tabList-year-layout {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      border-bottom: 1px solid #e9e9e9;
      padding-bottom: 10px;
      div {
        font-weight: 400;
        font-size: 18px;
        color: #333333;
        margin-right: 30px;
        margin-bottom: 10px;
        cursor: pointer;
      }
      .tabList-year-layout-ac {
        font-weight: 400;
        font-size: 18px;
        color: #1c84ff;
      }
    }
  }
}
.tabList-ac {
  visibility: unset;

  max-height: 400px;
}
</style>
